<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更新时的一个问题</title>
  <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">
    
      <h2>人员列表</h2>
      <button @click="changeMei">更改马冬梅</button>
      <ul>
        <li v-for="p in persons" :key="p.id">
          {{p.name}} ---- {{p.age}} ---- {{p.sex}}
        </li>
      </ul>

   </div>
    <script type='text/javascript'>
        new Vue({
            el:'#root',
            data:{
              persons:[
                {id:1, name:'马冬梅', age:18, sex:"女"},
                {id:2, name:'周冬雨', age:10, sex:"女"},
                {id:3, name:'周杰伦', age:28, sex:"男"},
                {id:4, name:'温兆伦', age:21, sex:"男"}
              ]
            },
            methods: {
              changeMei(){

                 // (1)这种更新方式在Vue开发者工具中可以立即反应
                //  this.persons[0].name = '马老师'
                //  this.persons[0].age = 50
                //  this.persons[0].sex = '男'
                /**
                 *  (2)这种方式在Vue开发者工具中不能立即反应(先点击再打开Vue开发者工具)
                 *     必须先点击之后再打开Vue开发工具
                 * */ 
                // this.persons[0] = {id:1, name:'马老师', age:50, sex:"男"}
                
                /**
                 * (3) 数组是没有相应的getter和setter的，因为它本身就不是根据这两个判断数据是否被修改
                 * (4) 数组只有调用 push、pop、shift、unshift、splice、sort、reverse方法时(都是修改原数组的方法)
                 *     Vue才认为你修改了数组，才会相应到页面上
                 *     因此以后修改数组要调用相应的方法，否则页面上不更新
                 *     Vue目的就是为了多使用封装好的方法
                 * (5) 最根本的操作：通过包装数组的常用方法来检测数组
                 *     怎么包装的？先调用原型链上的方法，修改后再响应到页面上---就是代理(重写)
                 * */ 
                       
                this.persons.splice(0,1,{id:1, name:'马老师', age:50, sex:"男"})
              }
            },
        })
    </script>
</body>
</html>